<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-07 18:32:07
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Head></Head>
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="400px">
          <!-- v-for语句遍历接口中的carousels -->
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 主题内容 -->
      <div class="plates">
        <!-- 遍历整个categoryArticles -->
        <div
          class="plate"
          v-for="cas in categoryArticles"
          :key="cas.category.id"
        >
          <!-- 第一部分 -->
          <div class="plate1" v-if="cas.category.id < 7" :key="cas.category.id">
            <!-- 头部 -->
            <div class="head">
              <div class="title">{{ cas.category.name }}</div>
              <div class="more" @click="toListHandler(cas.category)">
                更多&gt;&gt;
              </div>
            </div>
            <!-- 列表内容 -->
            <ul class="list">
              <!-- 遍历咨询 -->
              <li
                v-for="a in cas.aritcle"
                @click="toArticleHandler(a)"
                :key="a.id"
              >
                <img :src="a.cover" alt="" /><br />
                {{ a.title }}
              </li>
            </ul>
          </div>
          <!-- 第二部分 -->
          <div
            class="plate2"
            v-if="cas.category.id >= 7"
            :key="cas.category.id"
          >
            <!-- 头部 -->
            <div class="head">
              <div class="title">{{ cas.category.name }}</div>
              <div class="more" @click="toListHandler(cas.category)">
                更多&gt;&gt;
              </div>
            </div>
            <!-- 列表轮播 -->
            <div class="list2">
              <el-carousel
                trigger="click"
                height="200px"
                indicator-position="none"
              >
                <el-carousel-item v-for="a in cas.aritcle" :key="a.id">
                  <div>
                    <img :src="a.cover" alt="">
                    <div>
                      <div class="title" @click="toArticleHandler(a)">{{a.title}}</div>
                      <div class="bref" v-html="a.content" @click="toArticleHandler(a)"></div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Foot></Foot>
  </div>
</template>
<script>
import { get } from "../utils/request"; //使用get方法连接端口数据
import Head from "./components/Head.vue"; //引入Head
import Foot from "./components/Foot.vue"; //引入Foot
export default {
  //头脚注册
  components: {
    Head,
    Foot,
  },
  //获取数据
  data() {
    return {
      carousels: [],
      loading: false,
      categoryArticles: [],
    };
  },
  //钩子函数
  created() {
    this.loadCarousels(), this.loadCategoryArticles();
  },
  //方法
  methods: {
    toListHandler(category) {
      // 跳转
      this.$router.push({
        path: "/list",
        query: category,
      });
    },
    toArticleHandler(article) {
      this.$router.push({
        path: "/article",
        query: {
          id: article.id,
          name: article.category ? article.category.name : "",
        },
      });
    },
    loadCarousels() {
      let url = "/index/carousel/findAll";
      get(url).then((resp) => {
        this.carousels = resp.data;
      });
    },
    loadCategoryArticles() {
      this.loading = true;
      let url = "/index/article/findTopCategoryArticles";
      get(url).then((resp) => {
        this.categoryArticles = resp.data;
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$color_primary: #f1efe3;
.home {
  .content {
    background-color: $color_primary;
    .carousel {
      img {
        width: 100%;
        height: 100%;
      }
      border-bottom: 8px solid #8c6301;
    }
    .plates::after {
      content: "";
      display: block;
      clear: both;
    }
    .plates {
      width: 65%;
      margin: auto;
      .plate {
        box-sizing: border-box;
        float: left;
        width: 50%;
        height: 400px;
        background-color: #fff;
        padding: 0.5em;
        margin-bottom: 0.5em;
        .head {
          display: flex;
          justify-content: space-between;
          border-bottom: 2px solid #8c6301;
          padding: 0.5em 0.5em;
          .title {
            font-size: 18px;
            font-weight: bold;
            color: #8c6301;
            border-left: 3px solid #8c6301;
            padding: 0 0.5em;
          }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        }
        ul.list {
          img {
            width: 0px;
            height: 0px;
          }
          li {
            padding-top: 1em;
            padding-left: 1em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; //显示省略号代表被修改的值
            line-height: 1em;
            cursor: pointer;
            font-size: 16px;
          }
          li:hover {
            color: #8c6301;
          }
        }
      }
      .plate:nth-child(1) {
        width: 40%;
      }
      .plate:nth-child(2) {
        width: 35%;
      }
      .plate:nth-child(3) {
        width: 25%;
        ul.list {
          img {
            width: 95%;
            height: 100%;
            transition: all 0.5s;
            padding-bottom: 1em;
            padding-right: 1em;
          }

          img:hover {
            transform: scale(1.1, 1.1);
          }
          li:hover {
            color: #8c6301;
          }
        }
      }
      .plate:nth-child(4) {
        width: 100%;
        height: 100%;
        background-color: $color_primary;
        ul.list {
          width: 100%;
          height: 200px;
          text-align: center;
          img {
            width: 50%;
            height: 60%;
            transition: all 0.5s;
          }
          li {
            background-color: #fff;
            width: 20%;
            height: 100%;
            float: left;
            padding-top: 3em;
            padding-left: 3em;
            color: #22877c;
            margin-top: 1em;
          }
          img:hover {
            transform: scale(1.1, 1.1);
          }
          li:hover {
            color: #8c6301;
          }
        }
      }
      .plate:nth-child(5) {
        background-color: $color_primary;
        height: 300px;
        text-align: center;
        img {
          float: left;
          width: 40%;
          height: 300px;
          cursor: pointer;
          padding-right: 1em;
        }
        .title{
          font-size: 18px;
        }
        .title:hover{
          color: #8c6301;
          cursor: pointer;
        }
        .bref{
          padding-right: 1em;
          font-size: 13px;
          color: #999;
          text-overflow: ellipsis;
          line-height: 2em;
        }
        .bref:hover{
          color: #8c6301;
          cursor: pointer;
        }
      }
      .plate:nth-child(6) {
        background-color: $color_primary;
        height: 300px;
        text-align: center;
        img {
          float: left;
          width: 40%;
          height: 300px;
          cursor: pointer;
          padding-right: 1em;
        }
        .title{
          font-size: 18px;
        }
        .title:hover{
          color: #8c6301;
          cursor: pointer;
        }
        .bref{
          padding-right: 1em;
          font-size: 13px;
          color: #999;
          text-overflow: ellipsis;
          line-height: 2em;
        }
        .bref:hover{
          color: #8c6301;
          cursor: pointer;
        }
      }
    }
  }
}
</style>